<template>
  <HeaderBox>
    <van-form @submit="onSubmit">
      <div class="content">
        <p class="login-title">用户登录</p>
        <div class="login-input name-input">
          <span>姓名</span>
          <van-field placeholder="请输入账号" v-model="userName" />
        </div>
        <div class="login-input">
          <span>手机号</span>
          <van-field
            placeholder="请输入手机号"
            v-model="phoneNumber"
            type="tel"
            :rules="[
              {
                required: true,
                message: phoneNumber ? '请输入正确的手机号' : '请输入手机号',
                pattern: /^1[0-9]{10}$/,
              },
            ]"
            autocomplete="off"
          />
        </div>
        <div class="rules-msg">{{ errMsg }}</div>
      </div>
      <div class="button-wrap">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </HeaderBox>
</template>
<script>
import { Field, Icon, Button, Form, Toast } from "vant";
import HeaderBox from "@/components/Header";
import { login } from "@/api/user"
export default {
  name: "Login",
  data() {
    return {
      userName: "",
      phoneNumber: "",
      errMsg: ''
    };
  },
  methods: {
    // 登录
    onSubmit(values) {
      if (this.userName === '' || this.phoneNumber === '') {
        Toast.fail('请填写完整信息')
      } else {
        const data = {
          phone: this.phoneNumber,
          name: this.userName
        };
        login(data)
          .then((res) => {
            this.$router.push({ path: '/InfoPage' })
            window.localStorage.setItem('detailData', JSON.stringify(res.data))
            setStore({ name: 'detailData', content: JSON.stringify(res.data) })
            
          })
          .catch((err) => {
            this.errMsg = err.msg
          })
      }
    },
  },
  components: {
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Form.name]: Form,
    HeaderBox
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 80%;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff;
  margin: 0 auto;
  .van-cell {
    border-bottom: 1px solid #eee;
    padding: 0;
    margin-top: 5px;
  }
}
.login-title {
  padding: 0.5rem 0 0.4rem 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #1989fa;
}
.login-input {
  padding: 0 0.5rem;
  > span {
    font-size: 14px;
  }
  &.name-input {
    margin-bottom: 1rem;
  }
}
.more-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  a.link {
    color: #1989fa;
  }
  .switch-way {
    color: #333;
  }
}
.rules-msg {
  color: red;
  font-size: 0.37333rem;
  text-align: center;
  padding: 0.8rem 0 0 0;
  font-weight: 700;
}
.button-wrap {
  width: 80%;
  margin: 0.8rem auto;
}
</style>
